<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分布式链路跟踪测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        .server-box {
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .current-server {
            background-color: #e7f5ff;
            border: 2px solid #4dabf7;
        }
        .zipkin-server {
            background-color: #fff9db;
            border: 2px solid #ffd43b;
        }
        .port-badge {
            font-size: 24px;
            padding: 5px 15px;
        }
        .port-normal {
            background-color: #4dabf7;
        }
        .control-panel {
            margin: 30px 0;
            padding: 20px;
            background-color: #f1f3f5;
            border-radius: 8px;
        }
        .result-panel {
            margin-top: 30px;
            min-height: 300px;
        }
        .call-history {
            max-height: 300px;
            overflow-y: auto;
        }
        .history-item {
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
        }
        .trace-info {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        .trace-item {
            margin-bottom: 10px;
        }
        .trace-label {
            font-weight: bold;
        }
        .zipkin-link {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 8px;
            text-align: center;
        }
        pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">分布式链路跟踪测试面板</h1>
        
        <div class="row">
            <div class="col-md-6">
                <div class="server-box current-server">
                    <h3>当前服务实例</h3>
                    <span class="badge port-badge port-normal" th:text="${currentPort}"></span>
                    <p class="mt-2">您正在访问的服务实例端口</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="server-box zipkin-server">
                    <h3>Zipkin服务器</h3>
                    <span class="badge port-badge bg-warning">9411</span>
                    <p class="mt-2">Zipkin服务器端口</p>
                </div>
            </div>
        </div>
        
        <div class="zipkin-link">
            <h4>Zipkin UI访问地址</h4>
            <a th:href="${zipkinUrl}" target="_blank" class="btn btn-primary">打开Zipkin UI</a>
            <p class="mt-2">点击上方按钮打开Zipkin UI查看完整的链路跟踪信息</p>
        </div>
        
        <div class="control-panel">
            <h3>测试控制面板</h3>
            <div class="row mb-3">
                <div class="col-md-6">
                    <button id="simpleTraceBtn" class="btn btn-primary w-100">执行简单链路跟踪</button>
                </div>
                <div class="col-md-6">
                    <button id="complexTraceBtn" class="btn btn-success w-100">执行复杂链路跟踪</button>
                </div>
            </div>
        </div>
        
        <div class="trace-info">
            <h3>当前跟踪信息</h3>
            <div class="trace-item">
                <span class="trace-label">Trace ID:</span>
                <span id="traceId">等待执行跟踪...</span>
            </div>
            <div class="trace-item">
                <span class="trace-label">Span ID:</span>
                <span id="spanId">等待执行跟踪...</span>
            </div>
            <div class="trace-item">
                <span class="trace-label">父Span ID:</span>
                <span id="parentSpanId">等待执行跟踪...</span>
            </div>
            <div class="trace-item">
                <span class="trace-label">采样:</span>
                <span id="sampled">等待执行跟踪...</span>
            </div>
        </div>
        
        <div class="result-panel">
            <h3>调用结果</h3>
            <pre id="resultJson">等待执行跟踪...</pre>
            
            <div id="callHistory" class="call-history">
                <div class="alert alert-info">点击"执行简单链路跟踪"或"执行复杂链路跟踪"按钮开始测试</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const simpleTraceBtn = document.getElementById('simpleTraceBtn');
            const complexTraceBtn = document.getElementById('complexTraceBtn');
            const resultJson = document.getElementById('resultJson');
            const callHistory = document.getElementById('callHistory');
            const traceId = document.getElementById('traceId');
            const spanId = document.getElementById('spanId');
            const parentSpanId = document.getElementById('parentSpanId');
            const sampled = document.getElementById('sampled');
            
            // 执行简单链路跟踪
            simpleTraceBtn.addEventListener('click', function() {
                executeTrace('/api/zipkin/simple', '简单链路跟踪');
            });
            
            // 执行复杂链路跟踪
            complexTraceBtn.addEventListener('click', function() {
                executeTrace('/api/zipkin/complex', '复杂链路跟踪');
            });
            
            // 执行链路跟踪
            function executeTrace(url, type) {
                const timestamp = new Date().toLocaleTimeString();
                
                // 添加历史记录
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item bg-light';
                historyItem.innerHTML = `
                    <strong>${timestamp}</strong>: 
                    执行${type}请求...
                `;
                callHistory.insertBefore(historyItem, callHistory.firstChild);
                
                // 发起请求
                fetch(url)
                    .then(response => {
                        // 获取跟踪头信息
                        const traceIdHeader = response.headers.get('X-B3-TraceId');
                        const spanIdHeader = response.headers.get('X-B3-SpanId');
                        const parentSpanIdHeader = response.headers.get('X-B3-ParentSpanId');
                        const sampledHeader = response.headers.get('X-B3-Sampled');
                        
                        // 更新跟踪信息
                        traceId.textContent = traceIdHeader || '未获取到';
                        spanId.textContent = spanIdHeader || '未获取到';
                        parentSpanId.textContent = parentSpanIdHeader || '无';
                        sampled.textContent = sampledHeader === '1' ? '是' : '否';
                        
                        return response.json();
                    })
                    .then(data => {
                        // 格式化JSON并显示
                        resultJson.textContent = JSON.stringify(data, null, 2);
                        
                        // 更新历史记录
                        historyItem.className = 'history-item alert alert-success';
                        historyItem.innerHTML = `
                            <strong>${timestamp}</strong>: 
                            ${type}请求成功，Trace ID: ${traceId.textContent}
                        `;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        resultJson.textContent = '请求失败: ' + error.message;
                        
                        // 更新历史记录
                        historyItem.className = 'history-item alert alert-danger';
                        historyItem.textContent = `${timestamp}: ${type}请求失败: ${error.message}`;
                    });
            }
        });
    </script>
</body>
</html> 